import './index.less'
import {selectCameras} from '@/api/videoSurveillance'
import {CnMediumSpan} from '@/components/text'
import {getStorage} from '@/libs/localstoreage'
import {filterOption} from '@/libs/toolkit'
import AddVedio from './components/addVedio'
import VedioPlay from './components/vedioPlay'
import {Card} from 'ant-design-vue'
import EzuikitCameraVideo from '@/components/ezuikitCameraVideo/index.vue'

const VideoSurveillance = defineComponent({
  setup(props, ctx) {
    let currentCameraId = ref<number | undefined>(undefined)
    let vedioList = ref<Camera.Info[]>([])
    const currentCamera = computed(() => {
      isShowCamera.value = false
      setTimeout(() => {
        isShowCamera.value = true
      }, 200)
      return vedioList.value.find(item => item.cameraId === currentCameraId.value)
    })
    const isShowCamera = ref(false)

    function getPageDataSource() {
      console.log('bbccc', 1)

      let userId = getStorage('userId')
      if (userId) {
        selectCameras({userId})
          .then(res => {
            if (res.data.length && currentCameraId.value === undefined) {
              currentCameraId.value = res.data[0].cameraId
            } else if (currentCameraId.value !== undefined) {
              let idx = res.data.findIndex(item => item.cameraId === currentCameraId.value)
              if (idx === -1) currentCameraId.value = res.data[0].cameraId
            }
            vedioList.value = res.data
            isShowCamera.value = true
          })
          .catch(err => {
            vedioList.value = []
          })
      }
    }

    onMounted(() => {
      getPageDataSource()
    })

    return () => (
      <div>
        <Card style='width: 100%;height:100%;position:reactive'>
          <div class='flex items-center gap-x-16'>
            <CnMediumSpan>选择摄像头</CnMediumSpan>
            <a-select
              class='w-240'
              v-model={[currentCameraId.value, 'value']}
              fieldNames={{
                label: 'cameraName',
                value: 'cameraId'
              }}
              options={vedioList.value}
              show-search
              filterOption={filterOption}
            ></a-select>
            <AddVedio onSuccess={getPageDataSource}></AddVedio>
          </div>
        </Card>
        <div style='display:flex;' class='mt-20'>
          <div class=''>
            {isShowCamera.value ? (
              <EzuikitCameraVideo
                onSuccess={() => {
                  getPageDataSource()
                }}
                option={currentCamera.value}
              ></EzuikitCameraVideo>
            ) : null}
          </div>
          <div>
            {/* {isShowCamera.value ? (
              <VedioPlay
                id='myPlayer'
                option={currentCamera.value}
                onSuccess={() => {
                  getPageDataSource()
                }}
              ></VedioPlay>
            ) : null} */}
          </div>
        </div>
        {/* <VedioPlay
          id='myPlayer'
          option={currentCamera.value}
          onSuccess={() => {
            getPageDataSource()
          }}
        ></VedioPlay> */}
        {/* {currentCamera.value ? (
          <Card style='width: 100%;height:76vh;margin-top:10px'>
            <div class=' flex '>
              {currentCamera.value ? (
                <VedioPlay
                  id='myPlayer'
                  option={currentCamera.value}
                  onSuccess={() => {
                    getPageDataSource()
                  }}
                ></VedioPlay>
              ) : null}
            </div>
          </Card>
        ) : null} */}
      </div>
    )
  }
})

export default VideoSurveillance
